<div class="comment-bg" [ngStyle]="tagData.cssStyle | styleFilter">
    <!-- headDiv -->
    <div class="recomment-bg2" *ngIf="tagData.data?.headDiv">
        <div class="item-bg">
            <!-- 头像、用户名 -->
            <div class="first-row">
                <img *ngIf="tagData.data?.headDiv?.photo" src="{{tagData.data.headDiv.photo.url}}"
                    onerror="this.src='assets/img/375x250@2x.png'" [ngStyle]="tagData.data?.headDiv?.photo?.cssStyle | styleFilter" class="avatar">
                <div class="name-bg">
                    <p class="name" [ngStyle]="tagData.data?.headDiv?.firstRowLeft?.firstText?.cssStyle | styleFilter">
                        <span>{{tagData.data?.headDiv?.firstRowLeft?.firstText?.label}}</span>
                        <span class="name-tag"
                            [ngStyle]="tagData.data?.headDiv?.firstRowLeft?.tag?.cssStyle | styleFilter"
                            *ngIf="tagData.data?.headDiv?.firstRowLeft?.tag?.label && tagData.data?.headDiv?.firstRowLeft?.tag?.label.length > 0">{{tagData.data?.headDiv?.firstRowLeft?.tag?.label}}</span>
                    </p>
                    <span class="info"
                        [ngStyle]="tagData.data?.headDiv?.firstRowLeft?.secondText?.cssStyle | styleFilter">{{tagData.data?.headDiv?.firstRowLeft?.secondText?.label}}</span>
                </div>
                <span class="careBtn" *ngIf="tagData.data?.headDiv?.firstRowRight?.fourthText"
                    [ngClass]="{'careCss': tagData.data?.headDiv?.firstRowRight?.fourthText?.state === '1','careBtnCss': tagData.data?.headDiv?.firstRowRight?.fourthText?.state === '0'}"
                    [ngStyle]="tagData.data?.headDiv?.firstRowRight?.fourthText?.cssStyle | styleFilter"
                    appDebounceClick (debounceClick)="careBtn(tagData.data?.headDiv?.firstRowRight?.fourthText)">{{tagData.data?.headDiv?.firstRowRight?.fourthText?.label}}</span>
            </div>
            <!-- 评论内容 -->
            <div *ngIf="tagData.data?.headDiv?.thirdLeft?.firstText?.label" [ngStyle]="tagData.data?.headDiv?.thirdLeft?.firstText?.cssStyle | styleFilter">
                <p [ngStyle]="tagData.data?.headDiv?.thirdLeft?.firstText?.labelCssStyle | styleFilter" [ngClass]="{'show': tagData.data?.headDiv?.show, 'comment-content':!tagData.data?.headDiv?.show}" [innerHTML]="tagData.data?.headDiv?.thirdLeft?.firstText?.label | parseStyle"></p>
                <p class="show-all" *ngIf="tagData.data?.headDiv?.showText && tagData.data?.headDiv?.showText.length > 1" appDebounceClick (debounceClick)="showAll(tagData.data?.headDiv)">
                  {{tagData.data?.headDiv?.showText}}</p>
            </div>

            <div class="comment-imgs" *ngIf="tagData.data?.headDiv?.img_video?.videoUrl?.length > 0 || tagData.data?.headDiv?.img_video?.imgUrl?.length > 0">
              <!-- 只有1个视频，并且没有图片 -->
              <ng-container *ngIf="tagData.data?.headDiv?.img_video?.videoUrl?.length > 0 && tagData.data?.headDiv?.img_video?.imgUrl?.length === 0">
                <div class="case-video" *ngFor="let ite of tagData.data?.headDiv?.img_video?.videoUrl?.slice(0,1);let i = index"
                  appDebounceClick (debounceClick)="popup(tagData.data?.headDiv?.img_video,$event)">
                  <ng-container *ngIf="ite">
                    <div class="one-img" [ngStyle]="tagData.data?.headDiv?.onlyOneImgCssStyle | styleFilter">
                      <img src="{{ite}}?x-oss-process=video/snapshot,t_3,f_jpg,ar_auto"/>
                    </div>
                    <!-- 播放按钮 -->
                    <img class="v-img" [ngStyle]="tagData.data?.headDiv?.iconCssStyle | styleFilter" [src]="tagData.data?.headDiv?.icon"
                      onerror="this.src='assets/icon/video_icon_paly@3x.png'">
                  </ng-container>
                </div>
              </ng-container>
              <!-- 只需展示1个视频 -->
              <ng-container *ngIf="tagData.data?.headDiv?.img_video?.videoUrl?.length > 0 && tagData.data?.headDiv?.img_video?.imgUrl?.length > 0">
                <div class="case-video" *ngFor="let ite of tagData.data?.headDiv?.img_video?.videoUrl?.slice(0,1);let i = index"
                  appDebounceClick (debounceClick)="popup(tagData.data?.headDiv?.img_video)">
                  <ng-container *ngIf="ite">
                    <div class="video" [ngStyle]="tagData.data?.headDiv?.videoCssStyle | styleFilter">
                      <img src="{{ite}}?x-oss-process=video/snapshot,t_3,f_jpg,ar_auto"/>
                    </div>
                    <!-- 播放按钮 -->
                    <img class="v-img" [ngStyle]="tagData.data?.headDiv?.iconCssStyle | styleFilter" [src]="tagData.data?.headDiv?.icon"
                      onerror="this.src='assets/icon/video_icon_paly@3x.png'">
                  </ng-container>
                </div>
              </ng-container>
  
              <div class="img-content" *ngIf="tagData.data?.headDiv?.img_video?.videoUrl?.length < 3">
                <!-- 只有一张图片的情况 -->
                <ng-container *ngIf="tagData.data?.headDiv?.img_video?.imgUrl?.length === 1 && tagData.data?.headDiv?.img_video?.videoUrl?.length === 0; else elseTemplate">
                  <ng-container *ngFor="let ite of tagData.data?.headDiv?.img_video?.imgUrl;let i = index">
                    <div class="one-img" [ngStyle]="tagData.data?.headDiv?.onlyOneImgCssStyle | styleFilter">
                      <img class="icon" [src]="ite+'?x-oss-process=image/resize,m_fill,h_501'" appDebounceClick (debounceClick)="openImg(tagData.data?.headDiv?.img_video?.imgUrl,i)">
                    </div>
                  </ng-container>
                </ng-container>
                <ng-template #elseTemplate>
                  <ng-container *ngFor="let ite of tagData.data?.headDiv?.img_video?.imgUrl?.slice(0,3-tagData.data?.headDiv?.img_video.videoUrl.length);let i = index">
                    <div class="img-item" [ngStyle]="tagData.data?.headDiv?.imgCssStyle | styleFilter">
                      <img class="icon" [src]="ite+'?x-oss-process=image/resize,m_fill,h_501'" appDebounceClick (debounceClick)="openImg(tagData.data?.headDiv?.img_video?.imgUrl,i)">
                      <div class="text"
                        *ngIf="(tagData.data?.headDiv?.img_video.imgUrl.length + tagData.data?.headDiv?.img_video.videoUrl.length) > 3 && (i + tagData.data?.headDiv?.img_video.videoUrl.length ) === 2">
                        <span>
                          {{tagData.data?.headDiv?.img_video.imgUrl.length}}图
                        </span>
                      </div>
                    </div>
                  </ng-container>
                </ng-template>
              </div>

            </div>
        </div>
    </div>

    <div *ngIf="tagData.data?.headDiv?.sencondRowLeft?.firstText?.label" [ngStyle]="tagData.data?.headDiv?.sencondRowLeft.firstText?.cssStyle | styleFilter">{{tagData.data?.headDiv?.sencondRowLeft?.firstText?.label}}</div>

    <!-- 评论内容 -->
    <ng-container *ngFor="let item of tagData.data.data; let i = index">
        <div class="data-content" [ngStyle]="item.boxCssStyle | styleFilter">
            <div class="data-item">
                <div class="img-content" [ngClass]="{'item-content-center': item.firstRowLeft?.firstText?.icon}" appDebounceClick (debounceClick)="openPage(item.firstRowLeft.firstText.link)">
                  <img class="item-head" [src]="item.firstRowLeft?.firstText?.img+'?x-oss-process=image/resize,m_fill,h_501'" 
                  onerror="this.src='assets/img/default_img.png'" [ngStyle]="item.firstRowLeft?.firstText?.imgCssStyle | styleFilter"/>

                  <img class="item-head" [src]="item.firstRowLeft?.firstText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" *ngIf="item.firstRowLeft?.firstText?.icon"
                  onerror="this.src='assets/img/default_img.png'" [ngStyle]="item.firstRowLeft?.firstText?.iconCssStyle | styleFilter"/>
                </div>

                <div class="item-right-box" [ngClass]="{'noBorder': i === tagData.data.data.length - 1}" [ngStyle]="item.itemRightBoxCssStyle | styleFilter">
                    <div class="box-first">
                        <span class="box-first-name" [ngStyle]="item.firstRowLeft?.firstText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.firstText?.label}}<span [ngStyle]="item.firstRowLeft?.firstText?.tagCssStyle | styleFilter">{{item.firstRowLeft?.firstText?.tag}}</span></span>
                        <div class="box-first-btn" [ngStyle]="item.firstRowRight?.boxCssStyle | styleFilter">

                            <span class="text-btn" appDebounceClick
                              (debounceClick)="btnClick(item.firstRowRight?.singleText, tagData.data.data, i, item.firstRowLeft?.secondText)"
                              *ngIf="item.firstRowRight?.singleText?.label"
                              [ngStyle]="item.firstRowRight?.firstText?.cssStyle | styleFilter">{{item.firstRowRight?.singleText?.label}}</span>

                            <!-- 回复 -->
                            <div class="btn-icon-div first-row" appDebounceClick
                              (debounceClick)="btnClick(item.firstRowRight?.firstText, tagData.data.data, i, item.firstRowLeft?.secondText)">
                              <img class="btn-icon" *ngIf="item.firstRowRight?.firstText?.icon"
                                [ngStyle]="item.firstRowRight?.firstText?.iconCssStyle | styleFilter"
                                [src]="item.firstRowRight?.firstText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" />
                            
                              <span *ngIf="item.firstRowRight?.firstText?.value"
                                [ngStyle]="item.firstRowRight?.firstText?.valueCssStyle | styleFilter"
                                class="btn-value">{{item.firstRowRight?.firstText?.value}}</span>
                            </div>

                            <!-- 点赞 -->
                            <div class="thumbs-up 1" appDebounceClick
                              (debounceClick)="btnClick(item.firstRowRight?.secondText, tagData.data.data, i, item.firstRowLeft?.secondText)"
                              *ngIf="item.firstRowRight?.secondText" [ngStyle]="item.firstRowRight?.secondText?.boxCssStyle | styleFilter">
                              <img *ngIf="item.firstRowRight?.secondText?.icon"
                                [ngStyle]="item.firstRowRight?.secondText?.iconCssStyle | styleFilter" class="btn-icon"
                                [src]="item.firstRowRight?.secondText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" />
                              <span *ngIf="item.firstRowRight?.secondText?.value !== undefined"
                                class="btn-value">{{item.firstRowRight?.secondText?.value}}</span>
                            </div>
                            
                            <!-- 删除 -->
                            <div class="thumbs-up 2" appDebounceClick
                              (debounceClick)="btnClick(item.firstRowRight?.thirdText, tagData.data.data, i, item.firstRowLeft?.thirdText)"
                              *ngIf="item.firstRowRight?.thirdText" [ngStyle]="item.firstRowRight?.thirdText?.boxCssStyle | styleFilter">
                              <img *ngIf="item.firstRowRight?.thirdText?.icon" [ngStyle]="item.firstRowRight?.thirdText?.iconCssStyle | styleFilter"
                                class="btn-icon" [src]="item.firstRowRight?.thirdText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" />
                              <span *ngIf="item.firstRowRight?.thirdText?.value !== undefined"
                                class="btn-value">{{item.firstRowRight?.thirdText?.value}}</span>
                            </div>

                        </div>
                    </div>

                    <div class="box-thirdText" [ngStyle]="item.firstRowLeft?.thirdText?.cssStyle | styleFilter" appDebounceClick (debounceClick)="openPage(item.firstRowLeft.thirdText.link, $event)">
                      <span *ngIf="item.firstRowLeft?.thirdText?.label" [ngStyle]="item.firstRowLeft?.thirdText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.thirdText?.label}}</span>
                      <img *ngIf="item.firstRowLeft?.thirdText?.icon" [src]="item.firstRowLeft?.thirdText?.icon" [ngStyle]="item.firstRowLeft?.thirdText?.iconCssStyle | styleFilter"/>
                    </div>

                    <div class="box-fourthText" [ngStyle]="item.firstRowLeft?.fourthText?.cssStyle | styleFilter" appDebounceClick (debounceClick)="openPage(item.firstRowLeft.fourthText.link, $event)">
                      <span *ngIf="item.firstRowLeft?.fourthText?.label" [ngStyle]="item.firstRowLeft?.fourthText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.fourthText?.label}}</span>
                      <img *ngIf="item.firstRowLeft?.fourthText?.icon" [src]="item.firstRowLeft?.fourthText?.icon" [ngStyle]="item.firstRowLeft?.fourthText?.iconCssStyle | styleFilter"/>
                    </div>

                    <div>
                        <!-- 收到点赞展示的时间 -->
                        <p *ngIf="item.firstRowLeft?.secondText?.time" [ngStyle]="item.firstRowLeft?.secondText?.timeCssStyle| styleFilter">{{item.firstRowLeft?.secondText?.time}}</p>
                        <!-- 评论 -->
                        <p class="box-second" [ngStyle]="item.firstRowLeft?.secondText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.secondText?.label}}<span class="box-second-value"
                            *ngIf="item.firstRowLeft?.secondText?.value" [ngStyle]="item.firstRowLeft?.secondText?.valueCssStyle| styleFilter">{{item.firstRowLeft?.secondText?.value}}</span>
                            <img [src]="item.firstRowLeft?.secondText?.icon" *ngIf="item.firstRowLeft?.secondText?.icon" [ngStyle]="item.firstRowLeft?.secondText?.iconCssStyle | styleFilter">
                          </p>

                        <!-- 评论中的下一层评论 -->
                        <ng-container *ngIf="item.isMerchantData === undefined">
                          <ng-container *ngFor="let ite of item.firstRowLeft?.secondText?.subSecondDataSlice;let index = index;">
                            <div class="data-ite" [ngStyle]="ite.cssStyle| styleFilter">
                              <img class="data-ite-img" [src]="ite.img" [ngStyle]="ite.imgCssStyle| styleFilter"
                                onerror="this.src='assets/img/375x250@2x.png'" />
                              <div class="box bottom">
                                <p class="box-first-name ite" [ngStyle]="ite.nameCssStyle| styleFilter">{{ite.name}}<span class="tag"
                                   [ngStyle]="ite.tagCssStyle| styleFilter" *ngIf="ite.tag">{{ite.tag}}</span>
                                   <img class="delete-btn" *ngIf="ite.deleteIcon" [src]="ite.deleteIcon" [ngStyle]="ite.deleteIconCssStyle| styleFilter" 
                                    appDebounceClick (debounceClick)="del(ite, item.firstRowLeft?.secondText?.subSecondDataSlice, index)"/>
                                </p>
                                <p class="box-second-ite">{{ite.label}}<span class="box-second-value">{{ite.value}}</span></p>
                                <div class="showReplies"
                                  *ngIf="item.firstRowLeft?.secondText?.subSecondData.length > 2 && index === item.firstRowLeft?.secondText?.subSecondDataSlice.length - 1"
                                  appDebounceClick (debounceClick)="LookReplies($event, item.firstRowLeft?.secondText, i)">
                                  {{item.firstRowLeft?.secondText?.showReplies}}</div>
                              </div>
                            </div>
                          </ng-container>
                        </ng-container>

                        <div class="secondBox" *ngIf="item.secondRowleft" [ngStyle]="item.secondRowleft.firstText?.cssStyle| styleFilter">
                            <div class="box-first-btn" [ngStyle]="item.secondRowleft.firstText?.boxCssStyle| styleFilter" appDebounceClick (debounceClick)="openPage(item.secondRowleft.link.link)">
                              <img class="secondBox-img" [src]="item.secondRowleft.firstText?.img" [ngStyle]="item.secondRowleft.firstText?.imgCssStyle| styleFilter" onerror="this.src='assets/img/375x250@2x.png'"/>
                              <div class="secondBox-content">
                                  <span class="box-first-name secondRowleft" [ngStyle]="item.secondRowleft.firstText?.nameCssStyle| styleFilter">{{item.secondRowleft.firstText?.name}}</span>
                                  <p class="box-second secondRowleft" [ngStyle]="item.secondRowleft.firstText?.labelCssStyle| styleFilter">{{item.secondRowleft.firstText?.label}}</p>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div *ngIf="item.phoneButtons" [ngStyle]="item?.phoneButtonsCssStyle|styleFilter">
                  <ng-container *ngFor="let leftBtnItem of item.phoneButtons">
                    <img *ngIf="leftBtnItem.imgUrl" class="phoneIcon" [src]="leftBtnItem.imgUrl"
                    onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_169770008904705cd0dbfef8f009f64b4ecfd5d077968.png'"
                    [ngStyle]="leftBtnItem?.btnCssStyle|styleFilter" appDebounceClick
                    (debounceClick)="btnClick(leftBtnItem)" />
                  </ng-container>
                </div>
            </div>

            <ng-container *ngIf="item.isMerchantData !== undefined&& item.firstRowLeft?.secondText?.subSecondData&&item.firstRowLeft?.secondText?.subSecondData.length>0">
              <div [ngStyle]="item?.expressDataCssStyle | styleFilter">
                <ng-container *ngFor="let it of item.firstRowLeft?.secondText?.subSecondData;let in = index">
                    <div class="express" [ngStyle]="item?.expressBoxCssStyle | styleFilter">
                        <div class="express-circle" [ngStyle]="item?.expressCircleCssStyle | styleFilter">
                            <div class="top-circle-left" [ngStyle]="item?.circleCssStyle | styleFilter"></div>
                            <span class="label-left" style="height: 100%;" [ngStyle]="item?.itemCircleLineCssStyle | styleFilter"></span>
                        </div>
                        <div [ngStyle]="item?.itemContentCssStyle | styleFilter">
                          <span [ngStyle]="item?.itemTitleCssStyle | styleFilter">{{it.title}}</span>
                          <div class="top-content" [ngStyle]="item?.itemBoxCssStyle | styleFilter">
                            <span class="express-left" [ngStyle]="item?.itemTimeCssStyle | styleFilter">{{it.label}}</span>
                            <span [ngStyle]="item?.itemDescCssStyle | styleFilter">{{it.value}}</span>
                          </div>
                        </div>
                    </div>
                    <div class="bottom">
                      <div class="express-lable" [ngStyle]="item?.expressLabelCssStyle | styleFilter">
                        <span [ngStyle]="item?.borderCssStyle | styleFilter" class="label-left" [ngClass]="{'more-class' : item.expressMoreValue && in === item.firstRowLeft?.secondText?.subSecondData.length - 1}">
                          <span *ngIf="item.expressMoreValue && in === item.firstRowLeft?.secondText?.subSecondData.length - 1" style="position: relative;top: 0.25rem;"
                          appDebounceClick (debounceClick)="openPage(item.expressMoreValue.link.link)">{{item.expressMoreValue.link.label}}</span>
                        </span>
                      </div>
                    </div>
                </ng-container>
              </div>

            </ng-container>
        </div>
    </ng-container>

</div>

<p class="limit-hint" *ngIf="!tagData.data.data || tagData.data.data.length === 0" [ngStyle]="tagData.hintCssStyle | styleFilter">{{tagData.hint}}</p>
<ion-infinite-scroll *ngIf="showLoadMore" threshold="1%" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>
